<template>
    <div class="notfound" ref="bgstar">
        <h2>404--404--404</h2>
        <img src="../../assets/images/404_for.png" class="img404" alt="">
         <span
        class="span-dots"
          v-for="(star,i) in spanNum"
          :key="i"
          :style="{top:star.y,left:star.x,transform:'scale('+star.scaler+')',animationDelay:star.rate,backgroundColor:star.rgb}"
        ></span>
    </div>
</template>






<script>
import {mymixins} from "@/utils"
export default {
  mixins:[mymixins],
  data(){
    return {
      spanNum:[]
    }
  },
  methods:{
    ranFun(min,max){
      return Math.floor(Math.random()*(max-min)+1);
    }
  },
  mounted(){
    var screenW = this.$refs.bgstar.offsetWidth;
    var screenH = this.$refs.bgstar.offsetHeight;
    for(var i = 0; i< 550;i++){
      //星星位置随机
      var x = Math.floor(Math.random()*screenW);
      var y = Math.floor(Math.random()*screenH);
      //星星大小随机
      var scaler = Math.random()*2;
      //星星出现频率随机
      var rate = Math.random()*2.5;
      var r = this.ranFun(10,250);
      var g = this.ranFun(10,250);
      var b = this.ranFun(10,250);
      var a = this.ranFun(0,1);
      this.spanNum.push({
        x:x+"px",
        y:y+"px",
        scaler:scaler,
        rate:rate+"s",
        rgb:`rgba(${r},${g},${b})`,
      })
    }
  }
}
</script>




<style lang="scss" scoped>
.notfound{
    width:100%;
    height:100%;
    background: #0b0f15;
    overflow: hidden;
    position: relative;
}

.span-dots {
    position: absolute;
    animation: flash 2s alternate infinite;
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    // background: #fff;
  }
  @keyframes flash {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 0.5;
    }
  }

  .img404{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
  }


    // 不能识别媒体查询代码

</style>